<template>
	<div>
		<div class="search-line">
			项目名
			<el-input v-model="searchData.projName.value" style="width: 80px; margin-right: 30px; margin-left: 10px" />

			业主单位
			<el-input v-model="searchData.ownerUnit.value" style="width: 80px; margin-right: 30px; margin-left: 10px" />
			实施单位
			<el-input v-model="searchData.doUnit.value" style="width: 80px; margin-right: 30px; margin-left: 10px" />

			<el-select v-model="searchData.projStatus.value" placeholder="完成状态" style="width: 120px; margin-right: 30px; margin-left: 10px">
				<el-option label="已完成" value="1" />
				<el-option label="未完成" value="0" />
			</el-select>

			<el-select v-model="searchData.applyStatus.value" placeholder="审核状态" style="width: 120px; margin-right: 30px; margin-left: 10px">
				<el-option label="审核中" value="1" />
				<el-option label="已拒绝" value="3" />
			</el-select>

			<el-button type="primary" @click="loadData()">查询</el-button>
			<el-button type="warning" @click="clearnSearch()">重置</el-button>
			<el-button type="success" @click="addDialog = true">新建项目</el-button>
		</div>

		<div class="border w-full">
			<el-table :data="tableData.records">
				<!---------------------表单数据------------------------------->

				<el-table-column prop="projName" label="项目名" width="100" />
				<el-table-column prop="projUserName" label="项目负责人" width="100" />
				<el-table-column prop="depart.name" label="部门" width="100" />
				<!-- <el-table-column prop="totalPlanPrice" label="计划投资" width="100"/> -->
				<el-table-column prop="totalPrice" label="实际投资" width="100" />
				<!-- <el-table-column prop="planStartTime" label="计划开工" width="100"/> -->
				<!-- <el-table-column prop="planEndTime" label="计划结束" width="100"/> -->
				<el-table-column prop="finalStartTime" label="实际开工" width="100" />
				<el-table-column prop="finalEndTime" label="实际结束" width="100" />
				<el-table-column prop="ownerUnit" label="业主单位" width="150" />
				<el-table-column prop="doUnit" label="实施单位" width="150" />
				<el-table-column prop="remark" label="备注" width="100" />
				<el-table-column prop="applyStatus" label="审批状态">
					<template #default="{ row }">
						<el-tag :type="row.applyStatus === 1 ? 'success' : 'danger'">
							{{ row.applyStatus == "1" ? "审核中" : "拒绝" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180" />

				<!---------------------表单数据------------------------------->
				<el-table-column label="操作">
					<template #default="scope">
						<div>
							<!-- <el-button size="small" type="info" @click="openDetail(scope.row.id)">详情</el-button> -->
							<el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>

							<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>
		<!--------------------------------组件------------------>

		<!--  图片的 新增、修改-
	  <ImgsUpload
		 :fileList=imgList
		 @changeImgList="changeImgList"
		 arrLength="6"
		 />
		 -->

		<!-- 图片查看
	  <ImgsShow
	  :fileList=imgList
	  />
  
	  -->

		<!----select 框
		 <el-select v-model="form.sort" placeholder="选择" style="width: 240px">
		<el-option
		  v-for="item in options"
		  :key="item.value"
		  :label="item.label"
		  :value="item.value"
		  :disabled="item.disabled"
		/>
	  </el-select>
  
	   <el-select v-model="form.feedType" placeholder="饲养类型" style="width: 240px">
		<el-option label="内养" value="内养"/>
		<el-option label="寄养" value="寄养"/>
	  </el-select>
  
	  ----  -->

		<!-- 时间选择器
  <div class="block">
  
	<el-date-picker
	  v-model="form.buyTime"
	  value-format="YYYY-MM-DD"
	  type="date" // month // year
	  placeholder="Pick a date"
	  :default-value="new Date(2014, 1, 1)"
	/>
  </div>
  -->

		<!------------------树形选择弹窗弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="treeUserlDialog"
			title="项目关联人"
			width="30%"
			:before-close="resetForm"
		>
			<div>
				<div class="checkOption">
					<el-checkbox-group v-model="proUserVo.userIds">
						<el-checkbox v-for="item in userList" :key="item.id" v-model="checked1" :label="item.id" size="large">
							{{ item.userName + "---" + item.departName + "---" + item.departRole }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
				<div>
					<el-button type="primary" @click="changeUser">确定</el-button>
					<el-button @click="resetForm">取消</el-button>
				</div>
			</div>
		</el-dialog>

		<!------------------详情弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="detailDialog"
			title="详情"
			width="30%"
			:before-close="resetForm"
		>
			<div>
				<div>项目名 : {{ form.projName }}</div>
				<div>项目负责人 : {{ form.projUserId }}</div>
				<div>建设内容 : {{ form.projMat }}</div>
				<div>计划总投资 : {{ form.totalPlanPrice }}</div>
				<div>实际总投资 : {{ form.totalPrice }}</div>
				<div>计划开工时间 : {{ form.planStartTime }}</div>
				<div>计划结束时间 : {{ form.planEndTime }}</div>
				<div>实际开工时间 : {{ form.finalStartTime }}</div>
				<div>实际结束时间 : {{ form.finalEndTime }}</div>
				<div>业主单位 : {{ form.ownerUnit }}</div>
				<div>实施单位 : {{ form.doUnit }}</div>
				<div>备注 : {{ form.remark }}</div>
				<div>项目完成状态 0未完成 1已完成 : {{ form.projStatus }}</div>
				<div>创建时间 : {{ form.createTime }}</div>
				<div>更新时间 : {{ form.updateTime }}</div>
			</div>
			<el-button @click="resetForm">关闭</el-button>
		</el-dialog>

		<!------------------新增弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增"
			width="80%"
			:before-close="resetForm"
		>
			<!--数据开始---->
			<el-form :model="form" label-width="120px">
				<el-form-item label="项目名">
					<el-input v-model="form.projName" />
				</el-form-item>

				<el-form-item label="负责人">
					<el-select v-model="form.projUserId" placeholder="用户" style="width: 220px; margin-right: 30px; margin-left: 10px">
						<el-option
							v-for="item in userList"
							:key="item.id"
							:label="item.userName + '---' + item.departName + '---' + item.departRole"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="建设内容">
					<el-input v-model="form.projMat" />
				</el-form-item>
				<el-form-item label="计划总投资">
					<el-input v-model="form.totalPlanPrice" />
				</el-form-item>
				<el-form-item label="实际总投资">
					<el-input v-model="form.totalPrice" />
				</el-form-item>
				<el-form-item label="计划开工时间">
					<div class="block">
						<el-date-picker
							v-model="form.planStartTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="计划结束时间">
					<div class="block">
						<el-date-picker
							v-model="form.planEndTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="实际开工时间">
					<div class="block">
						<el-date-picker
							v-model="form.finalStartTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="实际结束时间">
					<div class="block">
						<el-date-picker
							v-model="form.finalEndTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="业主单位">
					<el-input v-model="form.ownerUnit" />
				</el-form-item>
				<el-form-item label="实施单位">
					<el-input v-model="form.doUnit" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" />
				</el-form-item>

				<!--数据截止---->
				<el-form-item>
					<el-button type="primary" @click="add">添加</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!------------------编辑弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="编辑"
			width="80%"
			:before-close="resetForm"
		>
			<!--数据开始---->
			<el-form :model="form" label-width="120px">
				<el-form-item label="项目名">
					<el-input v-model="form.projName" />
				</el-form-item>
				<el-form-item label="负责人">
					<el-select v-model="form.projUserId" placeholder="用户" style="width: 220px; margin-right: 30px; margin-left: 10px">
						<el-option
							v-for="item in userList"
							:key="item.id"
							:label="item.userName + '---' + item.departName + '---' + item.departRole"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="建设内容">
					<el-input v-model="form.projMat" />
				</el-form-item>
				<el-form-item label="计划总投资">
					<el-input v-model="form.totalPlanPrice" />
				</el-form-item>
				<el-form-item label="实际总投资">
					<el-input v-model="form.totalPrice" />
				</el-form-item>
				<el-form-item label="计划开工时间">
					<div class="block">
						<el-date-picker
							v-model="form.planStartTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="计划结束时间">
					<div class="block">
						<el-date-picker
							v-model="form.planEndTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="实际开工时间">
					<div class="block">
						<el-date-picker
							v-model="form.finalStartTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="实际结束时间">
					<div class="block">
						<el-date-picker
							v-model="form.finalEndTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>
				<el-form-item label="业主单位">
					<el-input v-model="form.ownerUnit" />
				</el-form-item>
				<el-form-item label="实施单位">
					<el-input v-model="form.doUnit" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" />
				</el-form-item>
				<!--数据截止---->
				<el-form-item>
					<el-button type="primary" @click="edit">修改</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue";
import ImgsShow from "@/components/img/imgShow/index.vue";
import { getProjectPage, updateProject, deletedProject, addProject, getProjectById } from "@/api/project";
import { getTree, getProUserList, doProUser, getProUserIds } from "@/api/user";

import { useUserStore } from "@/stores/userStores";

const tableData = reactive({
	records: [],
	orderBy: "",
	pages: 0,
	page: 1,
	size: 10,
	query: {},
});
const form = ref({
	id: "", //项目id
	projName: "", //项目名
	projUserId: "", //项目负责人
	projMat: "", //建设内容
	totalPlanPrice: "", //计划总投资
	totalPrice: "", //实际总投资
	planStartTime: "", //计划开工时间
	planEndTime: "", //计划结束时间
	finalStartTime: "", //实际开工时间
	finalEndTime: "", //实际结束时间
	ownerUnit: "", //业主单位
	doUnit: "", //实施单位
	remark: "", //备注
	projStatus: "", //项目完成状态 0未完成 1已完成
	createTime: "", //创建时间
	updateTime: "", //更新时间
});
//------------选择框------------------------
const options = [
	{
		value: "Option1",
		label: "Option1",
	},
	{
		value: "Option2",
		label: "Option2",
		disabled: true,
	},
];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);
const treeUserlDialog = ref(false);

const userList = ref([]);

// --------图片相关----------
const imgList = ref([]);
const changeImgList = (array) => {
	imgList.value = array;
	form.value.pictures = JSON.stringify(array);
};
const checked1 = ref(true);
const proUserVo = reactive({
	projId: "",
	userIds: [],
});

import { useRouter } from "vue-router";
const router = useRouter();
const openDetail = async (id) => {
	router.push("/admin/projectDetail/" + id);
};
const dealImgJson = () => {
	// 图片处理
	console.log("拿到的图片值", form.value.pictures);
	if ("" != form.value.pictures && null != form.value.pictures) {
		imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ""));
	}
};

// ------------------- 搜索操作 ------------------------

const searchData = ref({
	//项目id
	id: {
		key: "id",
		sqlKeyword: "EQ",
		value: "",
	},
	//项目名
	projName: {
		key: "proj_name",
		sqlKeyword: "LIKE",
		value: "",
	},
	//项目负责人
	projUserId: {
		key: "projUserId",
		sqlKeyword: "EQ",
		value: "",
	},
	//建设内容
	projMat: {
		key: "projMat",
		sqlKeyword: "EQ",
		value: "",
	},
	//计划总投资
	totalPlanPrice: {
		key: "totalPlanPrice",
		sqlKeyword: "EQ",
		value: "",
	},
	//实际总投资
	totalPrice: {
		key: "totalPrice",
		sqlKeyword: "EQ",
		value: "",
	},
	//计划开工时间
	planStartTime: {
		key: "planStartTime",
		sqlKeyword: "EQ",
		value: "",
	},
	//计划结束时间
	planEndTime: {
		key: "planEndTime",
		sqlKeyword: "EQ",
		value: "",
	},
	//实际开工时间
	finalStartTime: {
		key: "finalStartTime",
		sqlKeyword: "EQ",
		value: "",
	},
	//实际结束时间
	finalEndTime: {
		key: "finalEndTime",
		sqlKeyword: "EQ",
		value: "",
	},
	//业主单位
	ownerUnit: {
		key: "owner_unit",
		sqlKeyword: "LIKE",
		value: "",
	},
	//实施单位
	doUnit: {
		key: "do_unit",
		sqlKeyword: "LIKE",
		value: "",
	},
	//备注
	remark: {
		key: "remark",
		sqlKeyword: "EQ",
		value: "",
	},
	//项目完成状态 0未完成 1已完成
	projStatus: {
		key: "proj_status",
		sqlKeyword: "EQ",
		value: "",
	},
	applyStatus: {
		key: "apply_status",
		sqlKeyword: "EQ",
		value: "1",
	},
	//创建时间
	createTime: {
		key: "createTime",
		sqlKeyword: "EQ",
		value: "",
	},
	//更新时间
	updateTime: {
		key: "updateTime",
		sqlKeyword: "EQ",
		value: "",
	},
});

function clearnSearch() {
	searchData.value.id.value = "";
	searchData.value.projName.value = "";
	searchData.value.projUserId.value = "";
	searchData.value.projMat.value = "";
	searchData.value.totalPlanPrice.value = "";
	searchData.value.totalPrice.value = "";
	searchData.value.planStartTime.value = "";
	searchData.value.planEndTime.value = "";
	searchData.value.finalStartTime.value = "";
	searchData.value.finalEndTime.value = "";
	searchData.value.ownerUnit.value = "";
	searchData.value.doUnit.value = "";
	searchData.value.remark.value = "";
	searchData.value.projStatus.value = "";
	searchData.value.createTime.value = "";
	searchData.value.updateTime.value = "";
	loadData();
}

const openTree = async (projId) => {
	const res = await getProUserIds(projId);
	proUserVo.userIds = res.data;
	proUserVo.projId = projId;
	console.log("返回{}", res.data);
	console.log("返回的数据{}", proUserVo);

	treeUserlDialog.value = true;
};

// 修改关联人
const changeUser = async () => {
	console.log("修改后的数据{}", proUserVo);
	await doProUser(proUserVo);
	treeUserlDialog.value = false;
};

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
	const res = await getProjectById(id);
	form.value = res.data;
	// 图片处理
	dealImgJson();
	editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
	const res = await updateProject(form.value);
	ElMessage.success("修改成功");
	editDialog.value = false;
	loadData();
	resetForm();
};

/**
 *添加
 */
const add = async () => {
	const res = await addProject(form.value);
	ElMessage.success("添加成功");
	addDialog.value = false;
	loadData();
	resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
	ElMessageBox.confirm("是否确认删除？", "提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedProject({ id });
		ElMessage.success("success");
		loadData();
	});
};

/**
 * 重置表单
 */
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	if (detailDialog.value) {
		detailDialog.value = false;
	}
	if (treeUserlDialog.value) {
		treeUserlDialog.value = false;
	}

	form.value = {};
	// 图片处理
	imgList.value = [];
};

const loadData = async () => {
	const resd = await getTree();
	userList.value = resd.data;

	tableData.query = searchData.value;
	const res = await getProjectPage(tableData);
	tableData.records = res.data.list;
	tableData.page = res.data.page;
	tableData.pages = res.data.pages;
};

onMounted(() => {
	// 初始加载分页数据
	loadData(tableData);
});
</script>

<style scoped>
.search-line {
	display: flex;
	margin-bottom: 10px;
	text-align: center;
	line-height: 35px;
}

.checkOption {
	display: felx;
	flex-wrap: wrap;
	border: 1px solid;
	padding-left: 10px;
}
</style>
